import { BasicComponent } from './basic/basic.component';
import { ClickableComponent } from './clickable/clickable.component';
import { IconListComponent } from './icon-list/icon-list.component';

export const IConConfig = {
  location: 'Icon',
  description: 'SVG图标控件。',
  description_en: 'SVG icons component.',
  component: [
    {
      demo: BasicComponent,
      codePath: 'showcase/icon/basic/basic.component',
      demoTitle: '基础',
      demoTitle_en: 'Basic',
      demoDescription: 'SVG图标控件。',
      demoDescription_en: 'SVG icons controls.',
    },
    {
      demo: ClickableComponent,
      codePath: 'showcase/icon/clickable/clickable.component',
      demoTitle: '可点击图标',
      demoTitle_en: 'Clickable Icon',
      demoDescription: '图标hover时出现鼠标指针变成手指样式，且颜色随着状态变化。',
      demoDescription_en: 'When the icon hover appears, the mouse pointer changes to a finger style, and the color changes with the state.',
    },
    {
      demo: IconListComponent,
      demoTitle: '图标列表',
      demoTitle_en: 'List',
      demoDescription: '',
      demoDescription_en: '',
    },
  ],
  selector: 'lv-icon',
  snippet: `<i lv-icon="\${1:icon1}"></i>`,
  api: [
    {
      attribute: 'lvId',
      type: 'string',
      default: 'null',
      description: '图标id。',
      description_en: 'Icon id.',
    },
    {
      attribute: 'lvDisabled',
      type: 'boolean | string',
      default: 'false',
      description: '图标禁用。',
      description_en: 'Icon disabled.',
    },
    {
      attribute: 'lvColorState',
      type: 'boolean',
      default: 'false',
      description: '颜色是否随着状态变化。',
      description_en: 'Whether the color changes with the state.',
    },
  ],
  event: [],
};
